Design Web Responsive adalah sebuah metode atau pendekatan sistem web desain
yang bertujuan memberikan pengalaman berselancar yang optimal dalam berbagai
perangkat, baik mobile maupun komputer.
Langkah-langkah yang perlu di gunakan dalam pembuatan web ini adalah :
Langkah-langkah yang perlu di gunakan dalam pembuatan web ini adalah :
- Tentukan tema website - Tema web perpustakaan
- Membuat sketsa / blueprint / rancangan dari halaman web yang akan di buat
Seperti contoh berikut ini : - Web responsive berarti web yang tampilannya mengikuti ukuran layar gadget yang di gunakan untuk akses web tersebut – Buat folder di xampp/htdocs dengan nama : perpus
- Didalam folder perpus, siapkan 2 buah folder :
- images ==> untuk simpan gambar
- css ==> untuk simpan file css
*{
padding : 0;
margin : 0;
box-sizing : border-box;
}
body{
backgroud : #dedede;
font-family : 'Verdana',arial,sans-serif;
font-size : 15px;
}
p{
margin-bottom : 20px;
line-height : 1.5em;
}
h3{
margin-bottom : 20px;
border-bottom : 1px solid #aaa;
}
a{
text-decoration : none;
color : #333;
}
a:hover{
color : #666;
}
.container{
max-width : 1080px;
margin : 20px auto;
background : #fff;
overflow : hidden;
padding : 10px;
}
.header{
border : 1px solid #dedede;
padding : 10px;
margin : 10px;
background : #9E9AFB;
}
/* main */
.left{
width : 250px;
border : 1px solid #dedede;
padding : 10px;
margin : 10px;
float : left;
}
.left ul{
list-style-type : none;
}
.left ul li{
display : block;
}
.left ul li a{
display :block;
border-bottom : 1px solid #dedede;
margin-bottom : 10px;
padding : 10px 5px;
font-color : #D3D2ED;
}
.left ul li a:hover{
color:#461AF3;
}
.middle{
width : 500px;
border : 1px solid #dedede;
padding : 10px;
margin : 10px;
float : left;
}
.middle img{
max-width : 100%;
height : auto;
}
.middle a{
font-wight:bold;
}
.right{
width : 250px;
border : 1px solid #dedede;
padding : 10px;
margin : 10px;
float : left;
}
.right ul{
list-style-type : none;
}
.right ul li{
display : block;
}
.right ul li a{
display :block;
border-bottom : 1px solid #dedede;
margin-bottom : 10px;
padding : 10px 5px;
}
.right ul li a:hover{
color:#461AF3;
}
.footer{
clear : both;
border : 1px solid #dedede;
padding : 15px;
margin : 10px;
background : #9E9AFB;
}
@media screen and (max-width:959px){
#container{
width : 100%;
}
#left-column{
width : 70%;
}
#right-column{
width : 30%;
}
img{
width : 100%;
}
}
/*MEDIA QUERIES ( Responsive )
*******************************************/
@media screen and (max-width:1080px)
{
.container{
width : 100%;
}
.left{
width : 25%;
background : #D6CCFE;
}
.middle{
width : 68%;
float : right;
}
.right{
clear : both;
padding : 1% 4%;
width : auto;
float : none;
background : #D6CCFE;
}
}
/* untuk ukuran layar 700px kebawah */
@media screen and (max-width: 780px)
{
.header,
.footer{
text-align : center;
}
.left {
width : auto;
float : none;
}
.middle {
width : auto;
float : none;
}
.right {
width : auto;
float : none;
}
}
- Salin script untuk tampilan berikut : index.html simpan di dalam folder perpus
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Website Responsive</title>
<meta name="viewport" content="width=device-width, initialscale=1.0">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div class="header">
<h1 align="center"> Selamat Datang DI Pepustakaan XYZ
</h1>
</div>
<div class="main">
<div class="left">
<h3 align="center">Menu</h3>
<ul>
<li><a href="#">Login</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Daftar Buku</a></li>
</ul>
</div>
<div class="middle">
<h3 align="center">Berita</h3>
<p align="center"><strong><a href="#" >Membuat Design Web Responsive</a></strong></p>
<p><img src="images/gambar.jpg" alt=""></p>
<p><a href="#">Baca Selengkapnya >> </a>
</div>
<div class="right">
<h3 align="center">Buku Terpopuler</h3>
<p>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Pemrograman</a></li>
<li><a href="#">Database</a></li>
</ul>
</p>
</div>
</div>
<div class="footer">
<p align="center">Coppright © 2018 Belajar CSS Responsive </a></p>
</div>
</div>
</body>
</html>
Penjelasan Source Code
<meta name="viewport" content="width=device-width, initial-scale=1.0">
merupakan syntax yang berfungsi untuk menampilkan web sesuai dengan layar.
<link rel="stylesheet" href="css/main.css">
merupakan External Style sheet yang digunakan untuk mengload file css . Pada Struktur HTML berikut terdapat 3 class utama yaitu header , main dan footer .
Yaitu :
<div class="container">
<div class="header">digunakan untuk bagian header</div>
<div class="main">
<div class="left">Digunakan kolom bagian Kiri...</div>
<div class="middle">Digunakan kolom bagian tengah...</div>
<div class="right">Digunakan kolom bagian kanan...</div>
</div>
<div class="footer">Digunakan bagian footer...</div>
</div>
Hasilnya :
